<template>
    <main class="inner-page">
		<van-tabs sticky shrink scrollspy offset-top="1.44rem">
			<van-tab title="推荐" title-class="shop-tabs">
				<top-swiper/>
			</van-tab>
			<van-tab title="活动" title-class="shop-tabs">
				<coupons-list :shop-id="shopId"/>
			</van-tab>
			<van-tab title="热门" title-class="shop-tabs">
				<hot-sale-list :shop-id="shopId"/>
				<top-sale-list :theme-color="themeColor" :shop-id="shopId"/>
				<trade-rank :shop-id="shopId"/>
			</van-tab>
			<van-tab title="上新" title-class="shop-tabs">
				<new-goods-list :shop-id="shopId"/>
			</van-tab>
			<van-tab title="优选" title-class="shop-tabs">
				<show-case :shop-id="shopId"/>
			</van-tab>
			<!--tab右测内容-->
			<template #nav-right>
				<div class="btn-search" @click="router.push({path:'/shop/search/inputKey',query:{shopId:props.shopId}})">
					<van-icon name="search" />
				</div>
			</template>
		</van-tabs>
		<van-divider>已经到底了</van-divider>
	</main>
</template>
<style lang="scss" scoped>
.inner-page{
	--van-primary-color:v-bind(themeColor);
	--van-tabs-bottom-bar-color:v-bind(themeColor);
	--van-tabs-nav-background:var(--body-bg-color);
}
:deep(.shop-tabs){
	&.van-tab--active{font-size:18px!important;font-weight:bold;}
	&.van-tab--shrink{padding:0 10px;min-width:56px;}
	&.van-tab{font-size:16px;}
}
.btn-search{
	height:100%; display:flex; align-items: center;padding:0 8px; margin-left: auto;
	.van-icon{font-size:22px;padding:10px 4px;}
}

</style>
<script lang="ts" setup>
const props=defineProps({
	themeColor:{
		type:String,
		default:import.meta.env.VITE_THEME_COLOR
	},
	shopId:{
		type:String,
		required:true,
	},
})

//data
const router=useRouter()
</script>